<template>
  <view v-if="showPopup" class="uni-popup" :catchtouchmove="true">
    <view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
    <view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
      <view class="uni-popup__wrapper-box" @click.stop="clear" :class="shakeFlag ? 'shake' : ''">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'UniPopup',
    props: {
      // 开启动画
      animation: {
        type: Boolean,
        default: true
      },
      // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
      type: {
        type: String,
        default: 'center'
      },
      // 是否开启自定义
      custom: {
        type: Boolean,
        default: false
      },
      // maskClick
      maskClick: {
        type: Boolean,
        default: false
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        ani: '',
        showPopup: false,
        shakeFlag: false,
      }
    },
    watch: {
      show(newValue) {
        if (newValue) {
          this.open()
        } else {
          this.close()
        }
      }
    },
    created() {},
    methods: {
      shake(){
        this.shakeFlag = true
        setTimeout(() => {
          this.shakeFlag = false
        }, 1000);
      },
      clear() {},
      open() {
        this.$emit('change', {
          show: true
        })
        this.showPopup = true
        this.$nextTick(() => {
          setTimeout(() => {
            this.ani = 'uni-' + this.type
          }, 30)
        })
      },
      close(type) {
        if (!this.maskClick && type) return
        this.$emit('change', {
          show: false
        })
        this.ani = ''
        this.$nextTick(() => {
          setTimeout(() => {
            this.showPopup = false
          }, 300)
        })
      }
    }
  }
</script>
<style lang="scss">
  .uni-popup {
    position: fixed;
    /*  #ifdef  H5  */
    top: 0px;
    // top: 50px;
    /*  #endif  */
    /*  #ifndef  H5  */
    top: 0px;
    /*  #endif  */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    overflow: hidden;

    &__mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 997;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;

      &.ani {
        transition: all 0.3s;
      }

      &.uni-top,
      &.uni-bottom,
      &.uni-center {
        opacity: 1;
      }
    }

    &__wrapper {
      position: absolute;
      z-index: 998;
      box-sizing: border-box;

      &.ani {
        transition: all 0.3s;
      }

      &.top {
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(-100%);
      }

      &.bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(100%);
      }

      &.center {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(1.2);
        opacity: 0;
      }

      &-box {
        position: relative;
        box-sizing: border-box;
      }

      &.uni-custom {
        & .uni-popup__wrapper-box {
          // padding: 30upx;
          // background: #fff;
        }
        
        .shake{
          animation: shake .5s;
        }
        
        &.center {
          & .uni-popup__wrapper-box {
            position: relative;
            // max-width: 80%;
            max-height: 80%;
            overflow-y: scroll;
          }
        }

        &.top,
        &.bottom {
          & .uni-popup__wrapper-box {
            width: 100%;
            max-height: 500px;
            overflow-y: scroll;
          }
        }
      }

      &.uni-top,
      &.uni-bottom {
        transform: translateY(0);
      }

      &.uni-center {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
</style>
